/*#############################################################
 *Name: Fluid Solution
 *Date: 2006-09-06
 *Description: Totally liquid three-column layout, clean and simple.
 *Author: Viktor Persson
 *URL: http://arcsin.se
 *
 *Feel free to use and modify but please provide credits.
 *#############################################################

/* standard elements

$body_font: Verdana,"Lucida Sans Unicode",sans-serif
/* $body_font: "Sabon LT Std", "Hoefler Text", "Palatino Linotype", "Book Antiqua", serif
$code_font: monofur,Lucida Console,Monaco,monospace
$serif_font: "Century Schoolbook","Bookman Old Style","Palatino Linotype","Book Antiqua",Palatino,serif
$title_font: "Century Gothic","Trebuchet MS",sans-serif


*
  margin: 0
  padding: 0
  
a
  text-decoration: none
  
body
  background: white url(../images/bg.gif) repeat-x
  color: #444
  font: 1.1em $body_font
  padding-top: 40px
  
p, code, ul, ol
  padding-bottom: 1.2em
  
p, ul, ol
  font-family: $body_font
  
ul li
  list-style: none
  
code
  color: #444
  font-family: $code_font
  white-space: pre

blockquote
  background: #FBFCF5
  border-bottom: 1px solid #EED
  border-top: 1px solid #EED
  color: #444
  display: block
  font: normal $serif_font
  margin-bottom: 12px
  padding: 12px

h1, h2, h3, h4
  font: normal 1.2em $title_font
  color: #F06
  font-size: 1.2em
  margin-bottom: 5px

/* misc

.clearer
  clear: both

.code-frame
  padding: 0px
  border: 1px solid black
  margin: 10px 0px 10px 20px
  display: block
  div
    margin: 0px
    padding: 0px
    display: block
  .code-header
    font-weight: bold
    padding: 1px 3px
    border-bottom: 1px dashed black
    background: #ffaa00
    color: #111

.bold-frame
  padding: 0px
  border: 1px solid black
  margin: 10px 0px 10px 20px
  display: block
  div
    margin: 0px
    padding: 0px
    display: block
  .code-header
    font-weight: bold
    padding: 1px 3px
    border-bottom: 1px dashed black
    background: #ffaa00
    color: #111

.naked-code-frame
  padding: 0px
  border: 0px
  margin: 10px 0px 10px 20px
  display: block
  div
    margin: 0px
    padding: 0px
    display: block
  .code-header
    font-weight: bold
    padding: 1px 3px
    color: #333

.inventory
  border-collapse: collapse
  border: solid 1px black
  thead
    background: #222
    color: white
    border-bottom: solid 1px black
    text-align: left
  th
    padding: 1px 6px
  .odd
    background: #DDD
  .even
  td
    padding: 1px 6px
  .attr
    font-family: $code_font
    font-weight: bold


/* header

.header
  background: url(../images/stripes.gif) no-repeat
  border-bottom: 1px solid #EEE
  height: 160px
  margin-bottom: 24px
  h1
    color: #222
    font: normal 2.6em $serif_font
    margin-top: 40px
    text-align: center
  h2
    border-top: 1px solid #EEE
    color: #666
    text-align: right
    span
      background: #222
      color: #EEE
      font-weight: bold
      font-size: 0.9em
      font-family: $title_font
      padding: 0 10px

.annotation
  background: url(img/bgcode.gif)
  border: 1px solid #F0F0F0
  border-left: 6px solid #F06
  color: #06F
  display: block
  font: normal $body_font
  margin-bottom: 12px
  padding: 8px 10px
  .author, .timestamp
    padding: 0
    margin:  0
  a
    color: #F06
    text-decoration: none
    &:hover
      color: #444
      border-bottom: 1px solid #F06
    &:visited
      color: #777
      border-bottom: 1px solid #F06

/* left side (main content)

.left
  margin: 0 42% 20px 3%

.content
  .descr
    color: #06F
    font-size: 1.2em
    margin-bottom: 6px
  ul li
    list-style: url(../images/li.gif)
    margin-left: 18px
    li
      list-style: url(../images/li2.gif)
      margin-left: 18px
      font-size: 0.8em
  ol li
    margin-left: 18px
    li
      list-style: url(../images/li.gif)
      margin-left: 18px
      font-size: 0.8em
  h1
    font-size: 1.6em
    margin-bottom: 5px
    border-bottom: 1px dashed #999999
  * + h1
    margin-top: 15px
  h2
    font-size: 1.2em
    margin-top: 10px
    margin-bottom: 4px
    /* color: #06F;
    font-weight: bold
    color: #333
  a
    color: #F06
    text-decoration: none

.footer a
  color: #F06
  text-decoration: none

.content a:hover, .footer a:hover
  color: #444
  border-bottom: 1px solid #F06

/* nav & subnavigation

.nav, .right
  margin-bottom: 20px
  position: absolute
  top: 40px

/* navigation

.nav
  right: 23%
  text-align: center
  width: 17%
  .logo
    background: url(../images/logo.gif) no-repeat center top
    border-bottom: 1px solid #EEE
    border-top: 1px solid #EEE
    height: 159px
  h1
    color: #F60
    margin: 12px 0
  li
    border-bottom: 1px solid #EEE
    a
      color: #888
      display: block
      font: normal 1.4em $title_font
      padding: 8px 0
      &:hover
        background: #FAFAFA
        color: #F06

/* subnav

.right
  background: #222
  right: 3%
  width: 18%

.subnav
  padding: 12px 12px 0
  h1
    color: #F06
    font: normal 1.4em $title_font
    height: 20px
    margin-left: 8px
  ul
    margin: 0 0 16px
    padding: 0
  li
    list-style: none
    margin: 0
    margin-left: 8px
    border-bottom: 1px solid #333
  .current
    color: #FFF
    font: bold 1.0em $title_font
    height: 20px
    padding: 3px 6px 3px 8px
    margin-left: 8px
  li a
    color: #999
    display: block
    font: normal 1.0em $title_font
    padding: 3px 6px 3px 8px
    text-decoration: none
    &:hover
      color: #FFAA00
    &:visted
      color: #777
  .todo a
    color: #444

/* round edges

.roundtl, .roundtr, .roundbl, .roundbr
  background: url(../images/round.gif)
  height: 16px
  width: 14px

.roundtl, .roundbl
  float: left

.roundtr, .roundbr
  float: right

.roundtr
  background-position: right top

.roundbr
  background-position: right bottom

.roundbl
  background-position: left bottom

/* footer

.footer
  color: #666
  border-top: 1px solid #EEE
  font: normal 1em $body_font
  margin: 0 42% 0 3%
  padding: 8px 6px
